<template>
	<mescroll-uni :ref="'mescroll'+i" :top="0" :fixed="false"  @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
		<uni-list :style="{background: listColor }">
			<template v-for="(item, index) in dataList">
				<slot :item="item" :index="index"></slot>
			</template>
			<template v-if="dataList.length === 0 && !isLoading">
				<view class="no-data">
					<text>暂无数据</text>
				</view>
			</template>
		</uni-list>
	</mescroll-uni>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js"
	
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin],
		data() {
			return {				
				// 分页
				pager: {
					start: 1,
					limit: 10
				},
				// 数据集合
				dataList: [],
				
				reqServer: null,
				// 默认参数
				defParams: {},
				// 查询参数
				queryParams: null,
				// 用于本地分页存储数据
				localData: null,
				isLoading: true
			}
		},
		props: {	
			// 本地分页
			localPaging: {
				type: Boolean,
				default: false
			},
			listColor: {
				type: String,
				default: '#fff'
			}
		},
		methods: {
			init(server, defParams = {}, callback) {
				this.reqServer = server
				this.defParams = defParams
				
				if(this.dataList.length === 0)
					this.loadData(callback)
			},
			// 查询
			query(params) {
				this.queryParams = params
				this.reset()
				this.loadData()
			},
			// 加载数据
			loadData(callback) {
				const { reqServer } = this					
				if(reqServer) {			
					this.isLoading = true
					reqServer(this.pager, this.getParams()).then(res=>{
						this.bindData(res)
						this.isLoading = false
						callback && callback(res)
					})					
				}
			},	
			// 绑定数据
			bindData(res) {
				const { localPaging, pager } = this	
				if(localPaging) {
					if(!this.localData) this.localData = res
					const pIndex = (pager.start - 1) * pager.limit
					const appendData = res.result.slice(pIndex , pIndex + pager.limit)					
					this.dataList = [...this.dataList, ...appendData] 
					this.mescroll.endBySize(appendData.length, res.all_count || res.count)
				} else {
					this.dataList = [...this.dataList, ...res.data.dataResult]					
					this.mescroll.endBySize(res.data.dataResult.length, res.data.pageResult.totalCount)
				}
			},
			// 得到请求参数
			getParams() {
				const { defParams, localPaging, queryParams } = this				
				const sParams = Object.assign([], defParams)
				// if(!localPaging) {
				// 	Object.assign(sParams , this.pager)
				// }
				
				if(queryParams) {
					Object.assign(sParams , queryParams)
				}
				return sParams
			},
			reset() {
				if(this.localPaging) {
					this.localData = null
				}
				
				this.mescroll.setPageNum(1)				
				this.dataList = []
				this.pager.start = 1
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.reset()
				this.loadData()
			},
			/* 上拉加载的回调 */
			upCallback(page) {			
				console.log(page.num)
				this.pager.start = page.num + 1
				const { localPaging } = this	
				if(localPaging) {
					this.bindData(this.localData)
				} else {
					this.loadData()
				}
				
			}
		}
	}
	
	
</script>

<style>
	.no-data {
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(100vh - 150px);
		width: 100%;
	}
</style>
